<template lang="">
    <div class="login">
        <el-form :model="loginList" :rules="rules" ref="loginForm" class="loginForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginList.username" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="loginList.password" clearable show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
    </div>
</template>
<script>
import { userlogin } from "../request/api";
export default {
    data() {
        return {
            loginList: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        min: 6,
                        max: 16,
                        message: "长度在 6 到 16 个字符",
                        trigger: "blur",
                    },
                ],
            }
        }

    },
    methods: {
        login() {
            this.$refs.loginForm.validate((val) => {
                if (val) {
                    userlogin(this.loginList).then((res) => {
                        console.log(res, "登录结果");
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            //先存储用户信息
                            this.$store.dispatch('changeUserAction', res.list)
                            //跳转到index界面
                            this.$router.push("/index");
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: url(../assets/高启强.jpg) no-repeat;
    margin: 0px;
    background-size: 100% 100%;
    background-attachment: fixed;

    .loginForm {
        position: absolute;
        left: 40%;
        top: 30%;
        width: 400px;
        height: 350px;
    }
}
</style>